不是你不会唱歌，而是歌词效果太差！如何实现 KTV 歌词逐字效果！附源代码！cocos creator !

喜欢的话点个关注呗

 

◇    唱歌🎤怎么能少了歌词呢？

效果预览

先看下实现的最终效果如何。

配置环境

cocos creator 引擎 2.0.8 + typescript

使用方法

创建一个空节点，添加组件脚本，修改 string 和 progress 就可以看到效果了。

当然，还支持设置文本大小，底色和高亮字体颜色。

实现原理

原来打算参考 labelOutline 组件去实现，经过小小研究，发现系统字体里的描边是用 canvas 的 strokeText，所以选了另外一个方式。

最终方案还是使用 cc.Mask 。首先创建两个 Label ，一个在上层，一个在下层。接着为上层的 Label 添加一个 Mask 控制截取区域。

核心代码参考：

_updateRenderData() {
    this._label_mask.lineHeight = this._label_mask.fontSize = this._label.lineHeight = this._label.fontSize = this.fontSize;
    this._label.node.color = this.color;
    this._label_mask.node.color = this.color_mask;
    this._label_mask.string = this._label.string = this._string;
    this._updateBarStatus();
}

_updateBarStatus() {
    this._node_mask.width = Math.round(this._label.node.width * this.progress);
    this._node_mask.height = this._label.node.height;
}

往期精彩回顾

五个技巧让你程序卡起来！一般人我不告诉他的卡顿秘籍！
微信小游戏正式发布！流量主广告接入指南！
三行代码搞定！在 2.0.9 之前版本使用 tween！
cocos creator | 残影幻影拖尾效果
@ccclass 这是什么！浅谈它在 cocos creator 做了什么！

公众号内回复【ktv】获取工程代码